import React, {Component} from 'react'
import {connect} from 'react-redux'

import './ShopBar.scss'
import {showChoose, addSelectItem, minSelectItem, clearCar} from '../../actions/menuAction.js'

class ShopBar extends Component{
  getTotalPrice(){
    let listData = this.props.listData.food_spu_tags || []
    let totalPrice = 0
    let dotNum = 0
    let chooseList = []
    for(let i = 0; i < listData.length; i++){
      let spus = listData[i].spus || []
      for(let j = 0; j < spus.length; j++){
        let chooseCount = spus[j].chooseCount
        if(chooseCount > 0){
          dotNum += chooseCount
          chooseList.push(spus[j])
          totalPrice += spus[j].min_price * chooseCount
        }
      }
    }
    return {
      dotNum,
      totalPrice,
      chooseList
    }
  }
  addSelectItem(item){
    console.log(item)
    this.props.dispatch(addSelectItem({
      index: item._index,
      outIndex: item._outIndex
    }))
  }
  minSelectItem(item){
    this.props.dispatch(minSelectItem({
      index: item._index,
      outIndex: item._outIndex
    }))
  }
  renderChooseItem(data){
    let arr = data.chooseList || []
    return arr.map((item, index) => {
      return(
        <div key={index} className="choose-item">
          <div className="item-name">{item.name}</div>
          <div className="price">
            &yen;{item.min_price * item.chooseCount}
          </div>
          <div className="select-content">
            <div className="minus" onClick={() => this.minSelectItem(item)}></div>
            <div className='count'>{item.chooseCount}</div>
            <div className="plus" onClick={() => this.addSelectItem(item)}></div>
          </div>
        </div>
      )
    })
  }
  openChooseContent(){
    let flag = this.props.showChooseContent
    this.props.dispatch(showChoose({
      flag: !flag
    }))
  }
  clearCar(){
    this.props.dispatch(clearCar())
    this.props.dispatch(showChoose({
      flag: false
    }))
  }
  render(){
    let shipping_fee = this.props.listData.poi_info ? this.props.listData.poi_info.shipping_fee : 0
    let data = this.getTotalPrice()

    return(
      <div className='shop-bar'>
        {
          this.props.showChooseContent
          ? <div className="choose-content">
            <div className="content-top">
              <div className="clear-car" onClick={() => this.clearCar()}>清空购物车</div>
            </div>
            {this.renderChooseItem(data)}
          </div>
          : null
        }
        <div className="bottom-content">
          <div onClick={() => this.openChooseContent()} className="shop-icon">
            {
              data.dotNum > 0 ? <div className="dot-num">{data.dotNum}</div> : null
            } 
          </div>
          <div className="price-content">
            <p className="total-price">
              &yen;{data.totalPrice}
            </p>
            <p className="other-price">
              另需配送&yen;{shipping_fee}
            </p>
          </div>
          <div className="submit-btn">去结算</div>
        </div>
      </div>
    )
  }
}

export default connect(
  state => ({
    listData: state.menuReducer.listData,
    showChooseContent: state.menuReducer.showChooseContent
  })
)(ShopBar)